<%@page import="java.text.SimpleDateFormat"%>
<%@ page import="java.util.*"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<html>
<head>
<link href="dist/css/starter-template.css" rel="stylesheet">

<link href="dist/css/bootstrap.css" rel="stylesheet" type="text/css"
	media="all">
<link href="dist/css/bootstrap-theme.css" rel="stylesheet"
	type="text/css" media="all">
<link href="dist/css/bootstrap-duallistbox.css" rel="stylesheet"
	type="text/css" media="all">
<link rel="stylesheet" href="dist/css/datepicker.css">

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Work From Home</title>
</head>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/bootstrap.min.js"></script>
<script src="dist/js/bootstrap-select.js"></script>
<script src="dist/js/jquery.validate.min.js"></script>
<script src="dist/js/custom-validation.js"></script>
<body>
	<h3>Select the people worked/working from home</h3>
	<div>
		<form action="initWorkFromHomeScreen" method="post">
			<table>
				<tr>
					<td>
						<h3>Date :</h3>
					</td>
					<td>
						<div class="container" style="padding-top: 11px;">
							<div class="hero-unit" style="width: 150px">
								<input type="text" class="form-control" name="date"
									value="${session.selectedDate}" placeholder="Select date"
									id="datepicker" required="required">
							</div>
						</div>
					</td>
					<td><div class="container" style="padding-top: 11px;">
							<select class="" id="project" name="project">
								<option value="" selected="selected" disabled="disabled">Select	Project</option>
									<s:iterator value="projectList">
										<option value=<s:property value='id'/> id="project"><s:property	value="projectName" /></option>
									</s:iterator>
							</select>
						</div></td>
					<td style="padding-top: 12px;">
						<input class="btn btn-sm btn-primary " type="submit" value="Show Users">
					</td>
				</tr>
			</table>
		</form>
	</div>
	<hr>
	<div class="container" style="height: 350px">

		<div style="width: 50%;">
			<form id="userListform" action="addWorkFromHome.action" method="post">
				<select multiple="multiple" size="10" name="duallistbox_demo1[]">
					<s:iterator value="workFromHomeEmployeeList" var="row">
						<s:iterator value="row" var="x">
							<c:if test="${x.workFromHome == false}">
								<option value="<s:property value="id"/>">
									<s:property value="firstName" />
									<s:property value="lastName" />
								</option>
							</c:if>
							<c:if test="${x.workFromHome == true}">
								<option selected="selected" value="<s:property value="id"/>">
									<s:property value="firstName" />
									<s:property value="lastName" />
								</option>
							</c:if>
						</s:iterator>
					</s:iterator>
				</select> <br>
				<button type="submit" class="btn btn-default btn-block">Submit</button>
			</form>

		</div>
	</div>
</body>
<script src="dist/js/jquery-1.9.1.min.js"></script>
<script src="dist/js/prettify.js"></script>
<script src="dist/js/jquery.bootstrap-duallistbox.js"></script>

<script src="dist/js/bootstrap-datepicker.js"></script>
<script type="text/javascript">
	// When the document is ready
	$(document).ready(function() {

		$('#datepicker').datepicker({
			format : "dd/mm/yyyy",
			endDate : new Date(),
			autoclose : true
		});
		$("#datepicker").keydown(false);
		$('#datepicker').bind("contextmenu", function(e) {
			e.preventDefault();
		});
	});
</script>

<script>
	var demo1 = $('[name="duallistbox_demo1[]"]').bootstrapDualListbox();
	$("#demoform").submit(function() {

		alert($('[name="duallistbox_demo1[]"]').val());
		return true;
	});
</script>
<script src="dist/js/jquery.placeholder.js"></script>
<script>
	$('input').placeholder();
	prettyPrint();
</script>
</html>